<template>
	<view class="zy_input_container">
		<view
			:class="{'zy_input_bg':disabled===false,'zy_input_bg_dis':disabled===true,'zy_input_shape_surround':shape==='square','zy_input_shape_circle':shape==='circle','zy_input_border_bottom':border==='bottom','zy_input_border_surround':border==='surround'}"
			class="zy_input">
			<!-- 搜索框内容 -->
			<view class="zy_input_content">
				<!-- 前置自定义 -->
				<view v-if="preSlot" class="zy_input_content_preSlot">
					<slot></slot>
				</view>
				<input class="zy_input_content_input" v-model="fieldValue" :placeholder="placeholder"
					:style="[{fontSize:`${size}rpx`}]" :disabled="disabled" :focus="focus" :type="type"
					:maxlength="maxlength" @input="input" @focus="onFocus" @blur="blur" @confirm="confirm" />
				<!-- 清除按钮 -->
				<zy-icon v-if="fieldValue&&clearable==true" name="zy-icon-circle-close" size="26" color="#e9e9e9"
					@click="clear" class="zy_input_content_icon"></zy-icon>
				<!-- 自定义后置内容 -->
				<view v-else-if="sufSlot" class="zy_input_content_sufSlot">
					<slot></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: [],
		props: {
			// square/circle
			shape: {
				type: String,
				default: "square",
			},
			// surround/bottom/none
			border: {
				type: String,
				default: "surround",
			},
			//监听父组件传搜索框值
			value: {
				type: String,
				default: null,
			},
			//自定义前置内容
			preSlot: {
				type: Boolean,
				default: false
			},
			//控制搜索框文本和后置按钮尺寸（单位默认rpx）
			size: {
				type: Number | String,
				default: 32
			},
			//输入框为空时占位符
			placeholder: {
				type: String,
				default: function() {
					return this.$t('public.pleaseInput')
				}
			},
			//搜索框是否禁用
			disabled: {
				type: Boolean,
				default: false,
			},
			//输入框获取焦点
			focus: {
				type: Boolean,
				default: false,
			},
			//输入框类型，默认text（与原生input一致）
			type: {
				type: String,
				default: "text",
			},
			//最大输入长度，设置为 -1 的时候不限制最大长度，默认140
			maxlength: {
				type: String,
				default: "140",
			},
			//清除按钮
			clearable: {
				type: Boolean,
				default: false,
			},
			// 后置插槽自定义内容
			sufSlot: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				fieldValue: this.value,
			}
		},
		//监听父组件传值
		watch: {
			value(newVal){
				this.fieldValue = newVal
			},
			immediate:true,
			deep:true
		},
		methods: {
			//当键盘输入时，触发input事件
			input(event) {
				this.$emit('input', event.detail.value)
			},
			//输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
			onFocus(event) {
				this.$emit('focus', event.detail.value)
			},
			//输入框失去焦点时触发，event.detail = {value: value}
			blur: function(event) {
				this.$emit('blur', event.detail.value)
			},
			//点击完成按钮时触发，event.detail = {value: value}
			confirm(event) {
				this.$emit('confirm', event.detail.value)
			},
			//清除输入框内容
			clear() {
				this.fieldValue = ''
				this.$emit('clear')
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import './index.scss';
	/* 白色 */
	$zy-classic-white: #ffffff;

	/* 灰色 */
	$zy-light-grey: #e9e9e9;
	$zy-lightest-grey: #f5f5f5;

	/* 蓝色 */
	$zy-classic-blue: #409EFE;

	.zy_input_container {
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
	}

	.zy_input {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		display: flex;
	}

	.zy_input_bg {
		background-color: $zy-classic-white;
	}

	.zy_input_bg_dis {
		background-color: $zy-lightest-grey;
	}

	.zy_input_shape_surround {
		border-radius: 10rpx;
	}

	.zy_input_shape_circle {
		border-radius: 50rpx;
	}

	.zy_input_border_surround {
		border: 1rpx solid $zy-light-grey;
	}

	.zy_input_border_bottom {
		border-bottom: 1rpx solid $zy-light-grey;
		border-radius: 0;
	}

	.zy_input_content {
		width: 100%;
		display: flex;
	}

	.zy_input_content_preSlot {
		margin: auto 10rpx auto 0;
		font-size: 28rpx;
		color: #999999;
	}

	.zy_input_content_input {
		margin: auto 0;
		width: 100%;
		border: none;
		outline: none;
	}

	.zy_input_content_icon {
		margin: auto 0 auto 10rpx;
	}

	.zy_input_content_sufSlot {
		margin: auto 0 auto 10rpx;
		font-size: 28rpx;
		color: #999999;
	}
</style>
